<template>
	<view class="page must_know" :style="{'min-height':h+'px','padding-top':(mt)+'px'}">
		<c-nav-bar :title="title"></c-nav-bar>

		<view class="info" v-if="detailsList">
			<view class="name">
				{{detailsList.name}}
			</view>
			<view class="bot">
				<u-row customStyle="margin-bottom: 10px">
					<u-col span="4">
						<view class="demo-layout bg-purple">
							酒店民宿等级 :
						</view>
					</u-col>
					<u-col span="6">
						<view class="demo-layout bg-purple-light">
							{{categorytext}}
						</view>
					</u-col>

				</u-row>
				<view class="" style="border-bottom: 0.5rpx solid #CCCCCC !important;">
					<u-row customStyle="margin-bottom: 10px;">
						<u-col span="2.5">
							<view class="demo-layout bg-purple">
								开业时间 :
							</view>
						</u-col>
						<u-col span="5.5">
							<view class="demo-layout bg-purple-light">
								{{detailsList.openingDate}}
							</view>
						</u-col>
						<u-col span="4">
							<view class="demo-layout bg-purple-dark"
								v-if="detailsList.totalRooms!=null&&detailsList.totalRooms!=0">
								房间数量{{detailsList.totalRooms}}间
							</view>
						</u-col>
					</u-row>
				</view>
				<u-row customStyle="margin: 10px 0;">
					<u-col span="2.5">
						<view class="demo-layout bg-purple">
							酒店电话
						</view>
					</u-col>
					<u-col span="7.5">
						<view class="demo-layout bg-purple-light">
							+{{detailsList.landlinePhone}}
						</view>
					</u-col>
					<u-col span="2" @click="phone">
						<view class="demo-layout bg-purple-dark">
							<view style="width: 54rpx;	height: 54rpx;">
								<image style="width: 100%; height: 100%;"
									src="https://i.ringzle.com/file/20240218/e177a19ff24d4545861cf0d851fdac7e.png"
									mode="aspectFill"></image>
							</view>
						</view>

					</u-col>
				</u-row>

			</view>
		</view>


		<view class="tabs">
			<view v-for="(item,index) in list" :key="index" @tap="click(item,index)">
				<text :class="index==current?'active':''">{{item.name}}</text>
			</view>
		</view>



		<!-- 详情图片 -->
		<view class="content">

			<template v-if="current==0">
				<view class="one">
					<!-- 	<view class="address">
						{{detailsList.introduction}}
					</view> -->
					<view class="address" v-for="item,index in substrings ">
						<u-parse class="text-two" :content='item' :tagStyle="style"></u-parse>
					</view>
					<!-- 	<view v-for="(item,index) in detailsList.picList" :key="index">
						<image class="image" :src="item.pic" mode=""></image>
					</view> -->
				</view>
			</template>
			<template v-if="current==2">
				<view class="two">
					<!-- 	<view class="title">
						服务设施
					</view> -->

					<view class="aroundList3-list">
						<view v-for="(item,index) in textList" :key="index" v-if="item.isShow">
							<view class="two-text">
								<view class="left-title">
									{{item.title}}
								</view>
								<view class="right-list">
									<view class="item" v-for="ite,i in item.list" v-if="ite.isCheck==1">
										<view class="image">
											<image
												src="https://i.ringzle.com/file/20240130/ee12f90f29184532a0f74d00807941ab.png"
												mode="aspectFill"></image>
										</view>
										<view class="text">
											{{ite.facilityName}}
										</view>
									</view>

								</view>

							</view>
						</view>
					</view>
				</view>
			</template>
			<template v-if="current==1">
				<view class="three">
					<view class="one" v-if="detailsList.ageLimit!=null&&detailsList.ageLimit!=''">
						<view style="display: flex; align-items: center;">
							<image class="image"
								src="https://i.ringzle.com/file/20231124/18f1711aef5741f1888c61a6a0e8bc9c.png" mode="">
							</image>
							<view class="two-title">
								年龄限制
							</view>
						</view>
						<view class="text">
							{{detailsList.ageLimit}}
						</view>
					</view>
					<view class="one" v-if="detailsList.checkinTime!=null">
						<view style="display: flex; align-items: center;">
							<image class="image"
								src="https://i.ringzle.com/file/20231124/1bcf1645a2b743b09df25965b4197f86.png" mode="">
							</image>
							<view class="two-title">
								入离时间
							</view>
						</view>
						<view class="text">
							入住时间: {{detailsList.checkinTime&&detailsList.checkinTime.substring(0,5)}}以后
							离店时间:{{detailsList.checkoutTime &&detailsList.checkoutTime.substring(0,5)}}点前退房
						</view>
					</view>
					<view class="one">
						<view style="display: flex; align-items: center;">
							<image class="image"
								src="https://i.ringzle.com/file/20231124/64f01d612c054342b081ac2d26f2260e.png" mode="">
							</image>
							<view class="two-title">
								儿童及加床
							</view>
						</view>
						<view class="text" v-if="detailsList.childrenBedPact==1">
							<view>
								酒店允许携带儿童入住
							</view>
							<view>
								13岁及以上客人按成人收费
							</view>
						</view>
						<view class="text" v-else>
							酒店不允许携带儿童入住
						</view>
					</view>

					<view class="one" v-if="detailsList.childrenBedPact==1">
						<view style="display: flex; align-items: center;">
							<image class="image"
								src="https://i.ringzle.com/file/20231124/64f01d612c054342b081ac2d26f2260e.png" mode="">
							</image>
							<view class="two-title">
								床铺
							</view>
						</view>
						<view class="table">
							<view class=" text" style="line-height:36rpx ;">
								每间客房限制13岁及以下儿童，和成人共用现有床铺。部分房型政策根据您所选的房型有所不同，请具体查看预订房型政策每间客房的加床/加婴儿床政策根据您所选的房型有所不同，请具体查看预订房型政策
							</view>
							<view class="yunying" style="margin-top: 20rpx;">
								<view class="yunying1">
									年龄
								</view>
								<view class="yunying1"
									style="border-left: 2rpx solid #fff; border-right: 2rpx solid #fff;">
									床铺
								</view>
								<view class="yunying1">
									费用
								</view>
							</view>
							<view class="yuefen">
								<view class="yunying11">
									13岁及以下
								</view>
								<view class="yunying11">
									使用现有床铺
								</view>
								<view class="yunying11" style="color: #06B86F;">
									免费
								</view>
							</view>
						</view>
					</view>
					<view class="" v-else>
					</view>


					<view class="one" v-if="detailsList.carryPet!=null">
						<view style="display: flex; align-items: center;">
							<image class="image"
								src="https://i.ringzle.com/file/20231124/5861ed0ca30d444998bae6ed4fdec1ad.png" mode="">
							</image>
							<view class="two-title">
								宠物
							</view>
						</view>
						<view class="text">
							{{detailsList.carryPet==0?'不':''}}可携带宠物
						</view>
					</view>
					<view class="" v-else>

					</view>

					<view class="one" v-if="detailsList.checkinMode !=null">
						<view style="display: flex; align-items: center;">
							<image class="image"
								src="https://i.ringzle.com/file/20231124/f1bf4e49128848efa30f91b78b12ff9a.png" mode="">
							</image>
							<view class="two-title">
								入住方式
							</view>
						</view>
						<view class="text">
							<!-- 请到前台领取钥匙/门卡 -->
							{{detailsList.checkinMode==1?'前台钥匙/门卡':'密码'}}
						</view>
					</view>
					<view class="" v-else>

					</view>

					<view class="one" v-if="detailsList.breakfastConfig !=null">
						<view style="display: flex; align-items: center;">
							<image class="image"
								src="https://i.ringzle.com/file/20231124/fd5e17b08a3245dca99c376be7d1f46a.png" mode="">
							</image>
							<view class="two-title">
								{{detailsList.breakfastType!=3?'':'含'}}早餐
							</view>
						</view>
						<view class="text" v-if="detailsList.breakfastType==0">
							不提供早餐
							</view>
						<view class="text" v-if="detailsList.breakfastType==2">
							<view>
								形式：{{detailsList.breakfastConfig.form}}
							</view>
							<view v-if="detailsList.breakfastConfig.price!=0">
								价格：￥{{detailsList.breakfastConfig.price}}/人
							</view>
							<view v-else>
								价格：免费
							</view>
							<view>
								营业时间：每天
								{{detailsList.breakfastConfig.openTimeStart&&detailsList.breakfastConfig.openTimeStart.substring(0,5) }}
								至{{detailsList.breakfastConfig.openTimeEnd&&detailsList.breakfastConfig.openTimeEnd.substring(0,5) }}开放
							</view>
						</view>
					</view>
					<view class="" v-else>

					</view>

					<view class="one" style="margin-bottom: 20rpx;" v-if="detailsList.isDeposit!=null">
						<view style="display: flex; align-items: center;">
							<image class="image"
								src="https://i.ringzle.com/file/20231124/05d02ae3e3204a3ab265f60071e15542.png" mode="">
							</image>
							<view class="two-title">
								收费服务
							</view>
						</view>
						<view class="text">
							<!-- 住宿房不收取押金 -->
							{{detailsList.isDeposit==0?'无押金':'收取押金'}}
							<!-- {{detailsList.checkinMode==1?'前台钥匙/门卡':'密码'}} -->
						</view>
					</view>
					<view class="" v-else>

					</view>

				</view>
				<view class=""
					style="width: 100vw; box-sizing: border-box; height: 16rpx ; background-color: #F5F8FA;margin-top: 30rpx;">
				</view>
				<view class="btn-right" @click="navArrow">
					<view class="">
						供应商证照信息
					</view>
					<view>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="" style="width: 100vw; box-sizing: border-box; height: 16rpx ; background-color: #F5F8FA;">
				</view>
			</template>

		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				title: '详情',
				h: uni.getSystemInfoSync().windowHeight,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				substrings: {},
				jointPrice: '',
				jointName: '',
				imgWidth: '',
				imgHeight: '',
				current: 0,
				info: {},
				list: [{
					name: '详情介绍'
				}, {
					name: '预订须知'
				}, {
					name: '服务设施'
				}, ],
				categorytext: '',
				detailsList: '',
				textList: [],
				value: 3,
				licenseList: [],
				style: {
					// 字符串的形式
					p: 'color:#666;font-size:30rpx; line-height: 48rpx; font-weight: Regular;',
					image: 'width: 702rpx;'
					// span: 'font-size: 30rpx'
				}

			}
		},
		onLoad(opt) {
			this.id = opt.id;
			this.getList(opt.id)

		},
		methods: {

			// 打电话
			phone() {
				uni.makePhoneCall({
					phoneNumber: this.detailsList.landlinePhone //仅为示例
				});
			},
			click(item, index) {

				this.current = index
			},
			getList(id) {

				this.$api.get(`/api/hotel/getHomestayInfo/${id}`).then(res => {
					if (res.data.code == 0) {
						this.detailsList = res.data.data
						this.licenseList = res.data.data.licenseList

						// 重组数据结构
						let arrlist = Object.keys(res.data.data.facilityMap)
						arrlist.forEach((item, i) => {
							this.textList.push({
								title: item,
								list: res.data.data.facilityMap[item],
								isShow: res.data.data.facilityMap[item].filter(f => f.isCheck ==
									'1').length > 0 ? true : false
							})

						})

						// 根据逗号(\n)分割字符串 
						this.substrings = this.detailsList.introduction.split('\n');
						this.getHotelCategory()
					}
				})

			},

			// 获取酒店等级
			getHotelCategory() {
				this.$api.get('/sys/dict/type/all').then(res => {
					let dataList = res.data.data.find((p) => p.dictType == 'HotelCategory').dataList;
					dataList.forEach(item => {

						if (item.dictValue == this.detailsList.category) {
							this.categorytext = item.dictLabel
						}
					})
				})
			},
			navArrow() {
				uni.navigateTo({
					url: '/pagesTrip/hotel/details/Arrow?list=' + JSON.stringify(this.licenseList)
				})
			}

		}
	}
</script>
<style lang="less" scoped>
	.aroundList3-list {
		border-top: 1rpx solid #EFEFEF;
		// margin: auto 30rpx;
		padding: 30rpx 0;
		// display: flex;

		.two-text {
			display: flex;
			flex-wrap: wrap;
			text-align: center;

			.left-title {
				font-size: 26rpx;
				font-weight: bold;
				color: #333333;
				margin: 0 0 20rpx;
			}

			.right-list {

				display: flex;
				flex-wrap: wrap;
				text-align: center;
				width: 100%;

				.item {
					display: flex;
					width: 33%;
					margin-bottom: 20rpx;

					.image {
						width: 28rpx;
						height: 28rpx;
						margin: 0 10rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.text {
						font-size: 24rpx;
						font-weight: Regular;
						color: #333333;
					}
				}
			}
		}




	}

	.u-tabs__wrapper__nav__line {
		width: 75rpx !important;
		height: 10rpx !important;
	}

	.active {
		font-size: 32rpx;
		font-family: PingFang-SC-Bold, PingFang-SC;
		font-weight: bold;
		color: #111111;
		line-height: 45rpx;
	}

	.active::after {
		position: absolute;
		content: '';
		width: 84rpx;
		height: 8rpx;
		background: #111111;
		bottom: -26rpx;
		left: 50%;
		margin-left: -42rpx;
		border-radius: 30rpx;
	}

	.tabs {
		background: #fff;
		padding: 26rpx 0;
		display: flex;
		align-items: center;
		width: 100%;

		&>view {
			width: 33.33%;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #777777;
			line-height: 40rpx;
			position: relative;
			text-align: center;
		}
	}
</style>

<style lang="scss" scoped>
	.page {
		padding-bottom: 130rpx;
		box-sizing: border-box;
	}

	.bnts {
		box-sizing: border-box;
		position: fixed;
		padding: 12rpx 0;
		bottom: 0;
		width: 100%;
		background-color: #fff;
		z-index: 1;
		left: 0
	}

	.coverImg {
		width: 100%;
		height: 470rpx;
	}

	.info {
		box-sizing: border-box;
		width: 100vw;
		height: 386rpx;
		background-color: #F5F8FA;
		padding: 30rpx;

		.name {
			font-size: 36rpx;
			color: #111111;
			// margin: 40rpx 30rpx;
			// background-color: aqua;
			margin-bottom: 30rpx;
			font-weight: bold;
		}

		.bot {
			box-sizing: border-box;
			padding: 24rpx;
			height: 240rpx;
			background-color: #FFFFFF;
			border-radius: 16rpx;
			font-size: 28rpx;
			color: #111111;
			font-weight: Regular;

		}


	}

	.content {
		box-sizing: border-box;
		width: 100%;
		padding: 30rpx 0;
		height: 100%;

		.one {
			padding: 0 30rpx;

			.address {
				line-height: 42rpx;
				font-size: 28rpx;
				color: #333;
				padding: 20rpx 0;
				font-weight: Regular;
			}

			.image {
				border-radius: 16rpx;
				width: 690rpx;
				height: 368rpx;
				margin-bottom: 20rpx;
			}
		}

		.two {
			padding: 0 30rpx;

			.title {
				font-size: 36rpx;
				color: #111111;
				font-weight: Bold;
				margin: 0 0 30rpx;
			}

			.two-two {}

			.image {
				width: 32rpx;
				height: 32rpx;
				margin: 20rpx 20rpx 0 0;
			}

			.two-title {
				font-size: 28rpx;
				color: #111111;
				font-weight: Bold;
				padding-top: 20rpx;
			}

			.two-text {
				font-size: 24rpx;
				color: #192942;
				font-weight: Regular;
				display: flex;
				flex-wrap: wrap;
				// margin-left: 50rpx;

				.isCheck-one {
					width: 30%;
					padding: 20rpx 0 0;
				}

			}

		}

		.three {
			padding: 0 30rpx;

			.title {
				font-size: 36rpx;
				color: #111111;
				font-weight: Bold;
				margin: 0 0 30rpx;
			}

			.image {
				width: 32rpx;
				height: 32rpx;
				margin: 20rpx 20rpx 20rpx 0;
			}

			.two-title {
				font-size: 28rpx;
				color: #111111;
				font-weight: Bold;
				padding: 20rpx 0;
			}
		}

		.btn-right {
			box-sizing: border-box;
			width: 100%;
			height: 90rpx;
			display: flex;
			justify-content: space-between;
			padding: 0 30rpx;
			align-items: center;
			font-size: 28rpx;
			color: #111111;
			font-weight: Bold;
		}


	}

	.yunying1 {
		box-sizing: border-box;
		width: 33.33%;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
	}

	.yunying11 {
		box-sizing: border-box;
		width: 33.33%;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		border: 1px solid #e6e6e6;
	}

	.yunying {
		box-sizing: border-box;
		width: 100%;
		height: 80rpx;
		display: flex;
		background-color: #F5F8FA;
	}

	.yuefen {
		box-sizing: border-box;
		width: 100%;
		height: 80rpx;
		display: flex;
	}







	.yunying2 {
		box-sizing: border-box;
		width: 50%;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
	}

	.yunying22 {
		box-sizing: border-box;
		width: 50%;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		border: 1px solid #e6e6e6;
		font-size: 24rpx;
		color: #192942;

	}

	.yunying-2 {
		box-sizing: border-box;
		width: 100%;
		height: 80rpx;
		display: flex;
		background-color: #F5F8FA;
	}

	.yuefen-2 {
		box-sizing: border-box;
		width: 100%;
		height: 80rpx;
		display: flex;
	}


	.detailImg {
		box-sizing: border-box;
		width: 100%;
		margin: 0 !important;
	}
</style>